<template>
	<view class="container">
		<view class="header">

			<view class="balance">
				<view class="balance-label">当前现金余额（元）</view>
				<view class="balance-amount">1500.00</view>
				<button class="withdraw-button" @click="toCash">提现</button>
			</view>

			<view class="summary">
				<view class="summary-item">累计收入（元） 1700.00</view>
				<view class="summary-item" style="padding-top: 40rpx;">累计提现（元）200.00</view>
			</view>
		</view>

		<view class="transaction-list">
			<view class="transaction-header">
				<text class="transaction-title">收支明细</text>
				<text class="transaction-date">

					<image src="/static/日期.svg"></image>

					<view class="date">

						日期
					</view>
				</text>
			</view>
			<view class="transaction-item" v-for="(transaction, index) in transactions" :key="index">
				<view class="transaction-description">
					<view class="">
						{{ transaction.description }}
					</view>

					<view class="transaction-time">核销时间：{{ transaction.time }}</view>
				</view>
				<view class="transaction-amount" :style="{ color: transaction.amount > 0 ? '#00ff00' : '#ff0000' }">
					{{ transaction.amount > 0 ? '+' : '-' }}{{ Math.abs(transaction.amount) }}
				</view>

			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";

	const transactions = ref([{
			description: "XX车辆清洗、抛光打蜡服务",
			amount: 25.00,
			time: "2022-10-10 11:09",
		},
		{
			description: "提现",
			amount: -225.00,
			time: "2022-10-10 11:09",
		},
		{
			description: "XX车辆清洗、抛光打蜡服务",
			amount: 25.00,
			time: "2022-10-10 11:09",
		},
		{
			description: "XX车辆清洗、抛光打蜡服务",
			amount: 25.00,
			time: "2022-10-10 11:09",
		},
		{
			description: "XX车辆清洗、抛光打蜡服务",
			amount: 25.00,
			time: "2022-10-10 11:09",
		},
	]);

	const toCash = () => {
		uni.navigateTo({
			url: '/pages/index/incomeDetails/cash/cash'
		})
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		justify-content: space-between;
		background-color: #0D7AF7;
		padding: 26rpx;
		color: white;
	}

	.balance {
		border-right: 2rpx solid #ffffff;
		box-sizing: border-box;
		padding-right: 40rpx;

	}

	.balance-label {
		padding-top: 20rpx;
		font-weight: 550;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.balance-amount {
		padding-top: 30rpx;
		font-size: 38rpx;
		font-weight: bold;
	}

	.withdraw-button {
		width: 160rpx;
		height: 60rpx;
		background-color: #ff9900;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		margin-top: 14rpx;
	}

	.summary {
		box-sizing: border-box;
		padding-right: 30rpx;
	}

	.summary-item {
		font-size: 30rpx;
		margin-bottom: 10rpx;
		font-size: 700;
		color: white;
		margin: 20rpx 0;
		margin-bottom: 40rpx;
		font-weight: 550;
	}

	.summary-amount {
		font-size: 34rpx;
		font-weight: 700;
		color: #fff;
	}

	.transaction-list {
		background-color: #ffffff;
		padding: 30rpx 40rpx;
		border-radius: 10rpx;
	}

	.transaction-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		font-size: 30rpx;

	}

	.transaction-title {
		font-weight: bold;
		color: #333333;
	}

	.transaction-date {
		color: #5555ff;
		font-weight: 550;
		height: 40rpx;
	}

	.transaction-date .date {
		display: inline-block;
		padding-bottom: 30rpx;
		margin-left: 10rpx;
	}

	.transaction-date image {
		width: 40rpx;
		height: 40rpx;

	}

	.transaction-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 16rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.transaction-description {
		font-size: 28rpx;
		color: black;
		font-weight: 550;
	}

	.transaction-amount {
		font-size: 28rpx;
		font-weight: bold;

	}

	.transaction-time {
		font-size: 28rpx;
		color: #333;
		padding: 16rpx 0;
	}
</style>